<%@ page contentType="text/html;charset=UTF-8" %>

<html>
<head>
  <meta name="layout" content="template">
  <resource:dateChooser/>
</head>
<body>

<div class="section">
  <h1>Book Hotel</h1>
</div>

<div class="section">
  <g:form action="bookingHotel">
    <div class="entry">
      <div class="label">Name:</div>
      <div class="output">${hotel.name}</div>
    </div>

    <div class="entry">
      <div class="label">Address:</div>
      <div class="output">${hotel.address}</div>
    </div>

    <div class="entry">
      <div class="label">City, State:</div>
      <div class="output">${hotel.city}, ${hotel.state}</div>
    </div>

    <div class="entry">
      <div class="label">Zip:</div>
      <div class="output">${hotel.zip}</div>
    </div>

    <div class="entry">
      <div class="label">Country:</div>
      <div class="output">${hotel.country}</div>
    </div>

    <div class="entry">
      <div class="label">Nightly rate:</div>
      <div class="output">$${hotel.price}</div>
    </div>

    <div class="entry">
      <div class="label"><label>Check In Date:</label></div>
      <div class="input ${hasErrors(bean: booking, field: 'checkinDate', 'errors')}">
        <richui:dateChooser name="checkinDate" format="dd/MM/yyyy" value="${booking.checkinDate}"
                style="width:auto;"/>
        <div id="checkinDateErrors" class="errors">
          <g:renderErrors bean="${booking}" as="list" field="checkinDate"/>
        </div>
      </div>
    </div>

    <div class="entry">
      <div class="label"><label>Check Out Date:</label></div>
      <div class="input ${hasErrors(bean: booking, field: 'checkoutDate', 'errors')}">
        <richui:dateChooser name="checkoutDate" format="dd/MM/yyyy" value="${booking.checkoutDate}"
                style="width: auto;"/>
        <div id="checkoutDateErrors" class="errors">
          <g:renderErrors bean="${booking}" as="list" field="checkoutDate"/>
        </div>
      </div>
    </div>

    <div class="entry">
      <div class="label"><label>Room Preference:</label></div>
      <div class="input">
        <select name="beds">
          <option value="1">One king-size bed</option>
          <option value="2">Two double beds</option>
          <option value="3">Three beds</option>
        </select>
      </div>
    </div>

    <div class="entry">
      <div class="label"><label>Smoking Preference:</label></div>
      <div id="radio" class="input">
        <table>
          <tbody>
          <tr>
            <td>
              <input type="radio" name="smoking" value="true"/>
              <label>Smoking</label>
            </td>
          </tr>
          <tr>
            <td>
              <input type="radio" name="smoking" value="false" checked/>
              <label>Non Smoking</label>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="entry">
      <div class="label"><label>Credit Card #:</label></div>
      <div class="input ${hasErrors(bean: booking, field: 'creditCard', 'errors')}">
        <input type="text" name="creditCard" value="${booking.creditCard}"
                onblur="Booking.remoteValidate('Booking', 'creditCard', jq(this).val(), 'creditCardErrors')"/>
        <div id="creditCardErrors" class="errors">
          <g:renderErrors bean="${booking}" as="list" field="creditCard"/>
        </div>
      </div>
    </div>

    <div class="entry">
      <div class="label"><label>Credit Card Name:</label></div>
      <div class="input ${hasErrors(bean: booking, field: 'creditCardName', 'errors')}">
        <input type="text" name="creditCardName" value="${booking.creditCardName}"
                onblur="Booking.remoteValidate('Booking', 'creditCardName', jq(this).val(), 'creditCardNameErrors')"/>
        <div id="creditCardNameErrors" class="errors">
          <g:renderErrors bean="${booking}" as="list" field="creditCardName"/>
        </div>
      </div>
    </div>

    <div class="entry">
      <div class="label"><label>Credit Card Expiry:</label></div>
      <div class="input">
        <div>
          <select size="1" name="creditCardExpiryMonth">
            <option value="1">Jan</option>
            <option value="2">Feb</option>
            <option value="3">Mar</option>
            <option value="4">Apr</option>
            <option value="5">May</option>
            <option value="6">Jun</option>
            <option value="7">Jul</option>
            <option value="8">Aug</option>
            <option value="9">Sep</option>
            <option value="10">Oct</option>
            <option value="11">Nov</option>
            <option value="12">Dec</option>
          </select>
          <select size="1" name="creditCardExpiryYear">
            <option value="2005">2005</option>
            <option value="2006">2006</option>
            <option value="2007">2007</option>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
          </select>
        </div>
      </div>
    </div>

    <div class="entry">
      <fieldset class="buttonBox">
        <g:submitButton name="proceed" value="Proceed"/>
        <g:submitButton name="backToSearch" value="Cancel"/>
      </fieldset>
    </div>
  </g:form>
</div>
</body>
</html>